<script lang="ts" setup>
interface Props {
  status: string | number
}
const props = withDefaults(defineProps<Props>(), {
  status: 0,
})
</script>

<template>
  <div class="class-status" :class="`status${props.status}`">
    {{ `${props.status}` === '0' ? '未开课' : `${props.status}` === '1' ? '上课中' : `${props.status}` === '2' ? '已结课' : '已关班' }}
  </div>
</template>

<style lang="less" scoped>
  .class-status {
  font-size: 14px;
  position: relative;
  padding-left: 12px;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
}
.status0 {
  color: #165dff;

  &::before {
    background: #165dff;
  }
}
.status1 {
  color: #1d2129;

  &::before {
    background: #c9cdd4;
  }
}
.status2 {
  color: #f53f3f;

  &::before {
    background: #f53f3f;
  }
}
.status3 {
  color: #ff7d00;

  &::before {
    background: #ff7d00;
  }
}
</style>
